<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

let saleTrendChart = null;

const initLineChart = () => {
  const dom = document.getElementById("saleTrendChart");
  saleTrendChart = echarts.init(dom);
  saleTrendChart.setOption({
    title: {
      text: "今日销售趋势",
      textStyle: {
        color: "#00FFFF",
        fontSize: 16,
      },
      left: "center",
    },
    xAxis: {
      type: "category",
      data: ["8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"],
      axisLine: { lineStyle: { color: "#4A6AFF" } },
    },
    yAxis: {
      type: "value",
      axisLine: { lineStyle: { color: "#4A6AFF" } },
    },
    series: [
      {
        data: [1200, 3000, 1500, 2300, 4200, 3100, 4000],
        type: "line",
        smooth: true,
        lineStyle: { color: "#00FFFF" },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#00FFFF" },
              { offset: 1, color: "transparent" },
            ],
          },
        },
      },
    ],
    backgroundColor: "transparent",
    tooltip: {
      trigger: "axis",
    },
  });
};

onMounted(() => {
  initLineChart();
});

onUnmounted(() => {
  saleTrendChart?.dispose();
});
</script>

<template>
  <div class="dashboard">
    <!-- 顶部标题 -->
    <div class="header">XXX 销售大屏</div>

    <!-- 中间四个核心数据 -->
    <div class="core-metrics">
      <div class="card">
        <div class="label">今日销售额</div>
        <div class="value">19,905.51</div>
        <div class="sub">昨日：40,346.67</div>
      </div>
      <div class="card">
        <div class="label">今日订单数</div>
        <div class="value">502</div>
        <div class="sub">昨日：1056</div>
      </div>
      <div class="card">
        <div class="label">今日销量</div>
        <div class="value">504</div>
        <div class="sub">昨日：1064</div>
      </div>
      <div class="card">
        <div class="label">今日取消订单</div>
        <div class="value">21</div>
        <div class="sub">昨日：58</div>
      </div>
    </div>

    <!-- 图表示例 -->
    <div class="charts">
      <div id="saleTrendChart" class="chart-box"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dashboard {
  background-color: #0f1c2f;
  min-height: 100vh;
  color: #fff;
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
}
.header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 20px;
}
.core-metrics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid #00ffff;
  border-radius: 10px;
  padding: 20px;
  width: 220px;
  text-align: center;
}
.label {
  font-size: 16px;
  margin-bottom: 8px;
}
.value {
  font-size: 28px;
  font-weight: bold;
  color: #00ffff;
}
.sub {
  font-size: 12px;
  color: #aaa;
}
.charts {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.chart-box {
  width: 80%;
  height: 300px;
  border: 1px solid #4a6aff;
  border-radius: 8px;
}
</style>
